<template>
	<div class="comment_list">
		<h1>#历史评论</h1>
		<a-space direction="vertical" fill v-if="commentList.length >= 1">
			<template #split>
				<a-divider />
			</template>
			<a-comment
				class="comment-item"
				:author="item.username"
				:content="item.context"
				:datetime="item.sendDate"
				v-for="item in commentList"
				:key="item"
			>
				<template #actions>
					<span>
						评论了《<a-link
							@click="goMovieDetails(item.movie_id)"
							>{{ item.movie_name }}</a-link
						>》
					</span>
					<span><icon-thumb-up />{{ item.commentNumSuppose }}</span>
				</template>
				<template #avatar>
					<a-avatar>
						<img alt="avatar" :src="avatarUrl" />
					</a-avatar>
				</template>
			</a-comment>
		</a-space>
		<a-empty v-else />
	</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import movieApi from '../../api/movie'
import usersApi from '../../api/users'
const commentList = ref([])
const avatarUrl = localStorage.getItem('avatarUrl')
const router = useRouter()
usersApi.getComment().then(res => {
	commentList.value = res
	commentList.value.forEach(x => {
		x.sendDate = movieApi.transformDate(x.sendDate)
	})
})
function goMovieDetails(id) {
	router.push(`/movieDetails/${id}`)
}
</script>

<style lang="scss" scoped>
.comment_list {
	width: 1280px;
	margin: 0 auto;
	h1 {
		color: var(--fc-bg);
	}
	.comment-item {
		background-color: var(--main-2-bg);
		border-radius: 5px;
		padding: var(--normal-distance);
	}
	.comment-item:hover {
		box-shadow: 0 0 6px var(--sd-bg);
	}
	:deep(.arco-comment-content > span) {
		display: block;
		width: 100%;
		max-width: 800px;
		text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本。*/
		white-space: wrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
		overflow: hidden; /*内容会被修剪，并且其余内容是不可见的。*/
	}
}
:deep(.arco-comment-author) {
	color: var(--fc-bg);
}
:deep(.arco-comment-actions) {
	color: var(--fc-bg);
}
</style>
